<template>
  <a-button type="primary" @click="showModal"><plus-outlined/>新建项目</a-button>
  <a-modal v-model:open="visible" title="新建项目" :width="680" :body-style="{padding:0}" @ok="onSubmit">
    <a-form :model="form" :rules="rules" layout="horizontal" :label-col="{span:5}">
      <a-row>
        <a-col flex="auto" class="form-content">
          <a-form-item label="项目名称" name="name">
            <a-input v-model:value="form.name" placeholder="请输入项目名称" />
          </a-form-item>
          <a-form-item label="负责人" name="user_id">
            <user-select v-model="form.user_id"/>
          </a-form-item>
          <a-form-item label="项目描述" name="description">
            <a-textarea v-model:value="form.description"
                        show-count
                        :maxlength="200"
                        :auto-size="{ minRows: 3, maxRows: 6 }"
                        placeholder="请输入项目描述" />
          </a-form-item>
          <a-form-item label="开始时间">
            <a-date-picker v-model:value="form.start_date" valueFormat="YYYY-MM-DD" class="width-max"/>
          </a-form-item>
          <a-form-item label="截止时间">
            <a-date-picker v-model:value="form.end_date" valueFormat="YYYY-MM-DD" class="width-max"/>
          </a-form-item>
        </a-col>
        <a-col flex="200px" class="form-cover">
            <div class="cover-view">
              <img v-if="form.cover" :src="form.cover" alt="" width="100%">
              <span class="align-center" v-else>请上传<br/>或是选择封面</span>
            </div>
            <a-space>
              <use-uploader v-model="form.cover" text="上传"/>
              <a-tooltip title="随机生成">
                <a-button type="dashed" @click="getCover"><reload-outlined/></a-button>
              </a-tooltip>
            </a-space>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>

</template>

<script setup lang="ts">
import {reactive, ref} from 'vue';
import useMessage from '@/plugin/useMessage';
import {createProject } from '@/api/modules/project'; // 假设有一个创建项目的API
import {ReloadOutlined,PlusOutlined} from "@ant-design/icons-vue";
import {getImage} from "@/config/rangeImage";
import UseUploader from '@/components/UseUploader.vue';
import dayjs, {Dayjs} from "dayjs";
import UserSelect from "@/components/UserSelect.vue";

let form = reactive({
  name: '',
  description: '',
  user_id: <number>undefined,
  start_date:<Dayjs>dayjs().format('YYYY-MM-DD'),
  end_date:<Dayjs> dayjs().add(7, 'day').format('YYYY-MM-DD'),
  cover: '' // 新增封面图片字段
});

const rules = {
  name: [
    { required: true, message: '项目名称不能为空', trigger: 'blur' }
  ],
  user_id: [
    { required: true, message: '负责人不能为空', trigger: 'blur' }
  ]
};

const visible = ref(false); // 控制 modal 的显示与隐藏
const loading = ref(false);

const showModal = () => {
  visible.value = true;
};

const getCover = () => {
  form.cover = getImage();
};

const onSubmit = async() => {
  loading.value = true;
  let res = await createProject(form);
  if (res.code === 200) {

  }
  useMessage(res.code,res.message);
};
</script>

<style scoped>
.form-content {
  padding: 24px 32px;
}
.form-cover {
  padding: var(--space);
  border-left: 1px solid #f0f0f0;
  background-color: #fafafa;
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
}
.cover-view{
  width: 150px;
  height: 150px;
  margin-bottom: var(--space);
  border-radius: var(--radius);
  background-color: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0,0,0,.3);
}
</style>